import { cn } from '@/lib/utils';
import { ButtonHTMLAttributes, forwardRef } from 'react';
import { Loader2 } from 'lucide-react';

export interface GlassButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  children: React.ReactNode;
}

/**
 * GlassButton - Apple-style glassmorphism button
 * 
 * Features:
 * - Multiple variants and sizes
 * - Loading state with spinner
 * - Smooth hover/active animations
 * - Glass effect with blur
 */
const GlassButton = forwardRef<HTMLButtonElement, GlassButtonProps>(
  ({ className, variant = 'primary', size = 'md', loading, disabled, children, ...props }, ref) => {
    const variantClasses = {
      primary: 'bg-indigo-500 dark:bg-white/20 hover:bg-indigo-600 dark:hover:bg-white/30 text-white border-indigo-600/30 dark:border-white/30 shadow-lg shadow-indigo-500/30 dark:shadow-none',
      secondary: 'bg-white/60 dark:bg-white/10 hover:bg-white/70 dark:hover:bg-white/20 text-gray-700 dark:text-white/90 border-gray-300/40 dark:border-white/20',
      ghost: 'bg-transparent hover:bg-gray-200/50 dark:hover:bg-white/10 text-gray-700 dark:text-white/80 border-transparent',
      danger: 'bg-red-500 dark:bg-red-500/20 hover:bg-red-600 dark:hover:bg-red-500/30 text-white dark:text-red-100 border-red-600/30 dark:border-red-400/30',
    };

    const sizeClasses = {
      sm: 'px-3 py-1.5 text-sm',
      md: 'px-4 py-2 text-base',
      lg: 'px-6 py-3 text-lg',
    };

    return (
      <button
        ref={ref}
        disabled={disabled || loading}
        className={cn(
          'relative',
          'inline-flex items-center justify-center',
          'rounded-lg border',
          'backdrop-blur-md backdrop-saturate-150',
          'font-medium',
          'transition-all duration-300',
          'hover:scale-105 active:scale-95',
          'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100',
          'shadow-lg hover:shadow-xl',
          variantClasses[variant],
          sizeClasses[size],
          className
        )}
        {...props}
      >
        {loading && (
          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
        )}
        {children}
      </button>
    );
  }
);

GlassButton.displayName = 'GlassButton';

export default GlassButton;

